<template>
  <div class="common-layout">
    <el-container>
      <el-header>新能源汽车维修后台管理系统</el-header>
      <el-container>
        <el-aside width="200px">
          <!-- Aside -->
          <el-row class="tac">
            <el-col :span="24">
              <el-menu :default-active="route.path" class="el-menu-vertical-demo" active-text-color="#7D2817" unique-opened
            router>
            <div v-for="item in menuList" :key="item.id">
                <el-sub-menu :index="item.id + ''"  v-if="item.child">
                    <template #title>
                        <el-icon>
                            <location />
                        </el-icon>
                        <span>{{ item.title }}</span>
                    </template>
                    <el-menu-item :index="subItem.path" v-for="subItem in item.child" :key="subItem.id">
                        {{ subItem.title }}
                    </el-menu-item>
                </el-sub-menu>
                <!-- 不带箭头 -->
                <el-menu-item :index="item.path" v-else>
                    <el-icon>
                        <setting />
                    </el-icon>
                    <span>{{item.title}}</span>
                </el-menu-item>

            </div>
        </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <Bread></Bread>
          <!-- Main -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute } from "vue-router";
import Bread from '../components/Bread.vue';
const route = useRoute()
const menuList = ref([
  { id: 1, title: '首页', path: "/index" },
  { id: 2, title: '系统管理', child:[{id:21,title:"账号管理",path:"/account"},{id:22,title:"角色管理",path:"/role"},{id:23,title:"权限管理",path:"/author"}]},
  { id: 3, title: '广告管理', path: "/advertisement" },
  { id: 4, title: '新闻管理', path: "/news" },
  { id: 5, title: '视频管理', path: "/video" },
  { id: 6, title: '商品管理', child:[{id:61,title:"分类管理",path:"/category"},{id:62,title:"商品列表",path:"/product"},{id:63,title:"设置sku",path:"/sku"},{id:64,title:"订单管理",path:"/productOrder"}] },
  { id: 7, title: '汽修管理', child:[{id:71,title:"下单",path:"/placeOrder"},{id:72,title:"订单管理",path:"/veReOrder"}] },
  { id: 8, title: '用户管理', child:[{id:81,title:"用户列表",path:"/user"},{id:82,title:"积分列表",path:"/pointList"}] },
])
</script>

<style lang="scss" scoped>
.el-header {
  height: 60px;
  background-color: #7d2817;
  color: white;
  font-size: 22px;
  display: flex;
  align-items: center;
}

.el-container {
  width: 100%;
  height: 100%;
}

.el-aside,
.el-main {
  height: calc(100vh - 60px);
}

.el-aside {
  background-color: #eee;
}
</style>